<template>
  <el-card style="width:1000px; margin:0 auto;">
    <div slot="header">影楼信息</div>
    <el-form size="mini" ref="form" :model="formData" :rules="rules" label-width="120px" status-icon>
      <el-form-item label="名称" prop="name">
        <el-input placeholder="请输入名称" v-model.trim="formData.name" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="tel">
        <el-input placeholder="请输入电话" v-model.trim="formData.tel" auto-complete="off" maxlength="11"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input type="textarea" :rows="2" placeholder="请输入地址" v-model.trim="formData.address" auto-complete="off" maxlength="100"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit()" v-waves>确定</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<style scoped>
.el-form {
  margin: 20px;
}
</style>

<script>
import waves from '@/directive/waves' // 水波纹指令
import photoStudioApi from '@/api/photoStudio'

export default {
  directives: {
    waves
  },
  data () {
    return {
      formData: {
        name: '',
        tel: '',
        address: ''
      },
      rules: {
        name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === '' || typeof value === 'undefined') {
                callback(new Error('请输入名称'))
              } else if (value.length > 50) {
                callback(new Error('名字长度需在1到50之间'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        tel: [{
          validator: (rule, value, callback) => {
            if (value && (value.length > 11)) {
              callback(new Error('电话号码长度不超过11位'))
            } else {
              callback()
            }
          },
          trigger: 'blur'
        }],
        address: [{
          validator: (rule, value, callback) => {
            if (value && (value.length > 100)) {
              callback(new Error('地址长度不超过100个字符'))
            } else {
              callback()
            }
          },
          trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    /**
     * 提交数据
     */
    handleSubmit () {
      this.$refs.form.validate().then(response => {
        photoStudioApi.updateStudio(this.formData).then(response => {
          this.$notify({
            title: '成功',
            message: '信息修改成功',
            type: 'success'
          })
          location.reload()
        })
      })
    },
    /**
     * 获取影楼数据
     */
    getPhotoStudio () {
      photoStudioApi.getStudio().then(response => {
        this.formData.name = response.data.name
        this.formData.tel = response.data.tel
        this.formData.address = response.data.address
      })
    }
  },
  mounted () {
    this.getPhotoStudio()
  }
}
</script>
